<!DOCTYPE html>
<html>
	<head>
	<meta name="viewport" http-equiv="Content-Type" content="width=device-width, initial-scale=1; charset=UTF-8">
	<title>援助保障</title>
	<link rel="stylesheet" type="text/css" href="css/amazeui.min.css"/>
	<link rel="stylesheet" type="text/css" href="css/eventList_style.css"/>
	<link rel="stylesheet" type="text/css" href="css/shade.css"/>
	<script src="http://cdn.static.runoob.com/libs/jquery/2.1.1/jquery.min.js"></script>
	<script src="http://cdn.static.runoob.com/libs/bootstrap/3.3.7/js/bootstrap.min.js"></script>
	<script type="text/javascript" src="js/amazeui.min.js" ></script>
	<script type="text/javascript" src="js/GetUserName.js" ></script>
	<style type="text/css">
	#head{background-color:#eee;}
	h1{text-align:center;}
	table{
		margin-bottom: 0;		
	}
	.am-selected{
		width: 197px;
	}
	</style>
	
	</head>
	<body>
		<header data-am-widget="header" class="am-header am-header-default" style="background: #dd514c;">
		    <div class="am-header-left am-header-nav">
		        <a href="#doc-oc-demo1" data-am-offcanvas class="" >
		            <i class="am-header-icon am-icon-bars" style="font-size: 22px;"></i>
		        </a>
		    </div>

		    <h1 class="am-header-title">
		        	事件列表
		    </h1>
		    
			<div class="am-header-right am-header-nav">
		        <a href="#right-link" class="" data-am-modal="{target: '#newEvent'}">
		 			<i class="am-header-icon am-icon-plus"></i>
		 		</a>
		   </div>
 		</header>
 		
 		<div class="am-form-inline" style="padding-top:8px;width:100%;height: 53px;background: #dd514c;z-index: 99;">
	    	<input type="text" id="event_id" class="am-form-field" placeholder="请输入维修编号" style="margin-left: 8px; width: 70%;float: left;">
	    	<button  class="am-btn am-btn-default" style="position: absolute;right: 5%;width: 20%;background: rgb(221, 81, 76);border-radius: 4px;color: white;" onclick="search_id()">搜索</button>
		</div>
		






		<!--<div id="head">
		<table width=100% >
		    <tr>
		        <td>欢迎您 : 久事</td>
		        
		        <td align="right">
		           
		            <a href="/rescue/logout.jsp">安全退出</a>
		        </td>
		    </tr>
		    <tr>
		    <td>您有3件未完成事件</td>
		    
		    </tr>
		</table>
		
		</div>-->
		
		<!-- 侧边栏 -->
		<div id="doc-oc-demo1" class="am-offcanvas">
		  	<div class="am-offcanvas-bar">
		    	<div class="am-offcanvas-content">
		      		<h3 id="userName"></h3>
		      		</br>
			  		<a href="/r/private.jsp">
 						<i class="am-icon-user am-icon-fw"></i>
                		<span class="am-header-nav-title" style="margin-left: 10px;">
               				帐号详情
              			</span>
			  		</a>
			  		
			  		</br>
			  		</br>
	
			  		<a href="/r/LogoutService">
                		<i class="am-icon-close am-icon-fw"></i>
                		<span class="am-header-nav-title" style="margin-left: 10px;">
               				帐号登出
              			</span>
			  		</a>
			  		
			  		</br></br>
		    	<div id="superRole"> 
		    	
		    	</div>
		    	</div>
		    	
		    	<button class="am-btn am-btn-primary doc-oc-js" data-rel="close" style="width: 100%;position: absolute;bottom: 0px;">关闭侧边栏</button>
		  	</div>
		</div>
		<!-- 侧边栏 -->


		 
		<div class="scroll">
			<div class="outerScroller">
				
			</div>		
		</div>
		
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="alter">
	  	<div class="am-modal-dialog">
	   	 	<div class="am-modal-hd"  style="background: #f04f4f;color: white;">筛选
	      		<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
	    	</div>
	    	<div class="am-modal-bd" style="margin-top: 10px;">
	     		<form action="/r/SeachListServlet" method="post" class="am-form">
	     			<div class="am-form-group" style="text-align: -webkit-auto;">
	     				<label>网点：</label>
	     				<select id="station_id" name = "station_id" class="select_item">
	     					<option value="0">不限</option>
	     					<option value="0156">长乐路支行(0156)</option>
	     					<option value="0159">柳林路支行(0159)</option>
	     					<option value="0161">雁荡路支行(0161)</option>
	     					<option value="0162">淮海中路第三支行(0162)</option>
	     					<option value="0171">瑞金南路支行(0171)</option>
	     					<option value="0176">局门路支行(0176)</option>
	     					<option value="0178">瞿溪路支行(0178)</option>
	     					<option value="0180">丽园东路支行(0180)</option>
	     					<option value="0183">龙华东路支行(0183)</option>
	     					<option value="1622">徐家汇路支行(1622)</option>
	     					<option value="1981">打浦桥路支行(1981)</option>
	     					<option value="1994">金钟支行(1994)</option>
	     					<option value="2003">久事支行(2003)</option>
	     					<option value="2016">新天地支行(2016)</option>
	     					<option value="2087">复兴中路支行(2087)</option>
	     					<option value="2388">鲁班路支行(2388)</option>
	     					<option value="2511">淮海中路第一支行(2511)</option>
	     					<option value="2537">瑞金二路支行(2537)</option>
	     				</select>
	     			</div>
	     			
     				<div class="am-form-group" style="text-align: -webkit-auto;">
	     				<label>日期：</label>
						<select name = "month" id="month" style="display:initial ;width: 70px;" onchange="changeMonth()">
							<option value="0">不限</option>
							<option value="01">1</option>
							<option value="02">2</option>
							<option value="03">3</option>
							<option value="04">4</option>
							<option value="05">5</option>
							<option value="06">6</option>
							<option value="07">7</option>
							<option value="08">8</option>
							<option value="09">9</option>
							<option value="10">10</option>
							<option value="11">11</option>
							<option value="12">12</option>
						</select>
						月
						<select id="day" name = "day" style="display:initial ;width: 70px;">
							<option value="0">不限</option>
						</select>
						日	
	     			</div>
	     			
	     			<div class="am-form-group" style="text-align: -webkit-auto;">
	     				<label>维修项目：</label>
	     				<select id="item" class="select_item">
	     					<option value="0">不限</option>
	     				</select>
	     			</div>
				</form>
	    	</div>
	     		
	     	<button class="am-btn am-btn-secondary" type="submit" style="margin-top: 10px;width: 100%;" onclick="submit_seleceted()">确定</button>
	  	</div>
	</div>
	
	<a class="am-icon-btn am-icon-bars" data-am-modal="{target: '#alter'}" style="position:fixed;z-index:99;top:84%;left:80%;background:rgba(255,255,255,0.25);color:rgba(0,0,0,0.71);">
		<span class="am-sr-only">侧栏导航</span>
	</a>
	
	
		<div class="refresh_block" style="color: grey;">
		<h3 class="sljz" style="display: none;text-align: center;">

			上拉加载
		</h3>
	</div>
	
	
	<div class="am-modal am-modal-no-btn" tabindex="-1" id="newEvent" style="z-index:1101">
	  	<div class="am-modal-dialog">
	   	 	<div class="am-modal-hd"  style="background: #f04f4f;color: white;">修改
	      		<a href="javascript: void(0)" class="am-close am-close-spin" data-am-modal-close>&times;</a>
	    	</div>
	    	<div class="am-modal-bd" style="margin-top: 10px;">
	     		<form  action="/r/NewEvent" method="post" class="am-form">
	     			<div class="am-form-group" style="text-align: -webkit-auto;">
	     				<label>维修项目：</label>
	     				<select name="event_item" id="event_item" class="select_item">
	     					
	     				</select>
	     				<label>故障详情</label>
	     				<textarea name="event_description" class="" rows="5" id="doc-ta-1" required="required"></textarea>
	     				<label>图片详情(最多选择4张)</label>
	     				<input name="pic_address" type="text" name="fileAddr" id="fileAddr" style="display: none;"/>
	     				<input type="text" id='dirname' style="display: none;" size=50>
	     				<div id="localImag1" class="am-g">
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<img id="preImg_1" class="am-img-responsive" src=""/>
	     					</div>
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<img id="preImg_2" class="am-img-responsive" src=""/>
	     					</div>
	     				</div>
	     				<div id="localbtn1" class="am-g">
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<a id="prebtn_1" class="delbtn" style="width: 100%;display: none;" onclick="remove_upload_img(uploader,1)">删除</a>
	     					</div>
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<a id="prebtn_2" class="delbtn" style="width: 100%;display: none;" onclick="remove_upload_img(uploader,2)">删除</a>
	     					</div>
	     				</div>
	     				<div id="localImg2" class="am-g" style="margin-top: 5px;">
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<img id="preImg_3" class="am-img-responsive" src=""/>
	     					</div>
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<img id="preImg_4" class="am-img-responsive" src=""/>
	     					</div>
	     				</div>
	     				<div id="localbtn2" class="am-g">
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<a id="prebtn_3" class="delbtn" style="width: 100%;display: none;" onclick="remove_upload_img(uploader,3)">删除</a>
	     					</div>
	     					<div class="am-u-sm-6" style="padding-left: 0.5rem;padding-right: 0.5rem;">
	     						<a id="prebtn_4" class="delbtn" style="width: 100%;display: none;" onclick="remove_upload_img(uploader,4)">删除</a>
	     					</div>
					    </div> 
	     				<div id="container" style="margin-top: 5px;">
							<a id="selectfiles" href="" class='btn' style="cursor: pointer;">选择文件</a>
							<a id="postfiles" href="" class='btn' style="display: none;cursor: pointer;">开始上传</a>
						</div>
	     				<label>报修人姓名</label>
	     				<input name="applier_name" type="text" placeholder="" required="required">
	     				<label>报修人电话</label>
	     				<input name="applier_tel" type="number" placeholder="" required="required">
	     				<a class="btn" style="margin-top: 10px;width: 100%;" onclick="Img_upload()">提交</a>
	     				<button id="submitBtn" type="submit" style="display: none;"></button>
	     			</div>
	     		</form>
	    	</div>
	    	<p style="font-weight:600;color:red;">非网点帐号提交无效！</p>
	  	</div>
	</div>
	
	<div id="shadeDiv" class="shade" style="display:none;">
		<div class="shade-container">
		<p><i class="am-icon-circle-o-notch am-icon-spin"></i>&nbsp;&nbsp;正在上传，请耐心等待</p>
	</div>
	
	</body>
	<script src="js/stickUp.js"></script>
	<script type="text/javascript" src="js/lib/crypto1/crypto/crypto.js"></script>
	<script type="text/javascript" src="js/lib/crypto1/hmac/hmac.js"></script>
	<script type="text/javascript" src="js/lib/crypto1/sha1/sha1.js"></script>
	<script type="text/javascript" src="js/lib/base64.js"></script>
	<script type="text/javascript" src="js/lib/plupload-2.1.2/js/plupload.full.min.js"></script>
	<script type="text/javascript" src="js/upload.js"></script>
	<script type="text/javascript" src="js/eventList.js"></script>
	<script type="text/javascript" src="js/GetUser.js"></script>
	<script>
		
		//固定部分
		jQuery(function($) {
                $(document).ready( function() {
                  //enabling stickUp on the '.navbar-wrapper' class
                  $('.am-form-inline').stickUp();
                });
              });
		
		var jsondate;
		var selected = false;
		var page = 0;
		var searchId = "";
		refresh();
		page_init();
		
		getUserName();
		//左边栏
	  $(function() {
	    var id = '#doc-oc-demo1';
	    var $myOc = $(id);
	    $('.doc-oc-js').on('click', function() {
	      $myOc.offCanvas($(this).data('rel'));
	    });
	
	    $myOc.on('open.offcanvas.amui', function() {
	      console.log(id + ' 打开了。');
	    }).on('close.offcanvas.amui', function() {
	      console.log(id + ' 关闭了。');
	    });
	  });
	  
	
        
	    //上下拉加载
	    var scroll = document.querySelector('.scroll');
	   	var outerScroller = document.querySelector('.outerScroller');
	   	var refreshBlock = document.querySelector('.refresh_block');
	   	var touchStart = 0;
	   	var touchDis = 0;
	   	var refreshFlag = false
	   	outerScroller.addEventListener('touchstart', function(event) { 
	        var touch = event.targetTouches[0]; 
	        // 把元素放在手指所在的位置
	           touchStart = touch.pageY; 
	           console.log(touchStart);
	        }, false);
	   	outerScroller.addEventListener('touchmove', function(event) { 
	        var touch = event.targetTouches[0]; 
	        console.log(touch.pageY + 'px');  
	        touchDis = touch.pageY-touchStart;
	        console.log(touchDis);
	        if(Math.abs(touchDis) >= 50){
	        	refreshBlock.style.height = (0 - touchDis) + "px";
	        	document.querySelector('.sljz').style.display = "block";
	        	refreshFlag = true;
	        	console.log("height:" + refreshBlock.style.height);
	        }
	        if(isEnd){
	        	$('.sljz').text("已经到最底了！");
	        }
	        }, false);
	   	outerScroller.addEventListener('touchend', function(event) { 
	        touchStart = 0;
	        var top = scroll.offsetTop;
	        
	        if(refreshFlag && !isEnd){
	        	refreshBlock.style.height = 75 + "px";
	        	$('.sljz').html("<i class='am-icon-spinner am-icon-spin'></i>正在加载")
	        	refresh();
	        	refreshFlag = false;	
	        }else if(isEnd){
	        	document.querySelector('.sljz').style.display = "none";
	        	refreshBlock.style.height = 0 + "px";
	        }
	    }, false);
	  	
	  	//ajax加载
	  	var isEnd = false;
	  	function refresh(){
	  		var m = document.getElementById('month');
	  		var d = document.getElementById('day');
	  		var item = document.getElementById("item");
	  		var m_value = m.value;
	  		var d_value = d.value;
	  		var item_value = item.value;
	  		if(item_value == ""){
	  			item_value = "0";
	  		}
	  		var station_id = document.getElementById("station_id");
	  		var stationId_value = station_id.value;
	  		var selectDate = null;
	  		if(m_value == '0'){
	  			selectDate = "2018-"
	  		}else if((m_value != '0') && (d_value == '0')){
	  			selectDate = "2018-" + m_value + "-";
	  		}else{
	  			selectDate = "2018-" + m_value + "-" + d_value;
	  		}
	  		page ++;
	  		$.ajax({
	        type: "post",
	        url: "/r/GetEventListService?page="+page+"&date="+selectDate+"&station_id="+stationId_value+"&item_id="+item_value+"&search_id="+searchId,
	        dataType: "json",
	        success: function (data, textStatus) {
	        	refreshBlock.style.height = 0 + "px";
	        	document.getElementById("event_id").value = "";
	        	document.querySelector('.sljz').style.display = "none";
	        	$('.sljz').text("上拉加载");
	        	jsondate = data;
	        	console.log(jsondate[0]);
	        	if(jsondate[0] == null){
	        		isEnd = true;
	        		alert("已经到最底了！");
	        	}
	        	if(jsondate == "No role"){
	        		alert("身份已过期，请重新登录");
	        		window.location.href="/r/login.html";
	        	}else{
	        		for(var i in jsondate[0]){
		        		$('.outerScroller').append("<table id='"+ jsondate[0][i].event_id +"' class='am-table' cellpadding='10' cellspacing='10' style='margin-bottom: 10px;background: #DD514C;color: white;width: 95%;margin-left: 2.5%;border-radius: 4px;margin-top: 10px;'>"+        
					   								"<tbody>"+
					    								"<tr id=eventinfo10  onclick = linkto('"+jsondate[0][i].event_id+"')> "+ 
				            								"<td style='font-size: 18px;font-weight:600;border-top: 0;'>"+
				            									jsondate[0][i].station_name + 
			            									"</td>"+	
			            									"<td style='text-align:right'>"+
			            									"<span style='padding:5px;border:solid 1px;border-radius:5px'>"+ jsondate[0][i].status+"</span></td>"+
						    							"</tr>"+
						    							"<tr id=eventinfo10  onclick = linkto('"+jsondate[0][i].event_id+"')>"+
					            							"<td style='font-size: 15px;padding-left: 20px;border-top: solid white 2px'>"+
					            								jsondate[0][i].event_item +
					            							"</td>"+
					            							"<td style='font-size: 15px;border-top: solid white 2px;text-align:right'>"+
					            								jsondate[0][i].event_date + 
					            							"</td>"+
					    								"</tr>"+
					    							"</tbody>"+ 
												"</table>");											
		        		//console.log(jsondate[0][i]);
		        		refreshBlock.style.height = 0 + "px";
		        		var table = document.getElementsByTagName('table');
		        		for(var i=0;i<table.length;i++){
		        			table[i].onclick = "LinktTo(table[i].id)";
		        		}
		        	} 
	        	}       	
	        },
	        error: function (XMLHttpRequest, textStatus, errorThrown) {
	        	
	        },
	        complete: function (XMLHttpRequest, textStatus) {
	            this; // 调用本次AJAX请求时传递的options参数
	        }
	    });
	  	}
	  	
		function changeMonth(){
	  		var m = document.getElementById('month');
	  		var d = document.getElementById('day');
	  		var m_value = m.value;
	  		var m_31 = new Array(1,3,5,7,8,10,12);
	  		var days = 30;
	  		$('#day').empty();
	  		for(var i = 0;i<m_31.length;i++){
	  			if(m_value == m_31[i].toString()){
	  				days = 31;
	  			}
	  		}
	  		if(m_value == 2){
	  			days = 28;
	  		""}
	  		d.add(new Option("不限",0));
	  		if(m_value != '0'){
	  			for(var j = 1;j<=days;j++){
		  			if(j<10){
		  				d.add(new Option(j,"0"+j))
		  			}else{
		  				d.add(new Option(j,j));
		  			}
		  		}
	  		}
	  		console.log(days);
	  	}
		
		function submit_seleceted(){
			page = 0;
			$('.outerScroller').empty();
			refresh();
			$('#alter').modal('close');
		}
		
		function search_id(){
			var item_id = document.getElementById("event_id");
			var itemId_value = item_id.value;
			searchId = itemId_value;
			console.log(searchId);
			if(searchId.length > 0){
				page = 0;
				console.log(searchId);
				refresh();
				$('.outerScroller').empty();
			}	
		}
		
		function Img_upload(){
			console.log("aaa");
			var item = document.getElementById("event_id");
			var test = getUser();
			console.log(test);
			item.value = $('#event_item option:selected').val() + ","+ $('#event_item option:selected').text();
			console.log(item.value);
			var description = document.getElementsByName("event_description")[0].value;
			var name = document.getElementsByName("applier_name")[0].value;
			var tel = document.getElementsByName("applier_tel")[0].value;
			if((description == "") || (description == null)){
				alert("请输入故障详情");
			}else if((name == "") || (name == null)){
				alert("请输入姓名");
			}else if((tel == "") || (tel == null)){
				alert("请输入手机号");
			}else{
				document.getElementById("shadeDiv").style.display = "block";
				if(uploader.files.length >= 1){
					document.getElementById("postfiles").click();
				}else{
					document.getElementById("submitBtn").click();
				}
			}
		}
		
		function linkto(url){
			window.location.href="/r/eventdetail.jsp?event_id="+url;
		}
	</script>
</html>